<template>
    <div class="activities">
      <div class="header">
        <h1>全部活动</h1>
        <div class="filter">
          <span class="filter-item active">全部</span>
          <span class="filter-item">进行中</span>
          <span class="filter-item">已结束</span>
        </div>
      </div>
      
      <div class="activities-container">
        <activity-card 
          v-for="activity in activities" 
          :key="activity.id" 
          :activity="activity"
        />
      </div>
    </div>
  </template>
  
  <script>
  import ActivityCard from '../components/ActivityCard.vue'
  
  export default {
    components: {
      ActivityCard
    },
    data() {
      return {
        activities: [
          {
            id: 1,
            title: '校园环保志愿活动',
            time: '2023-10-15 09:00-12:00',
            location: '大学城中心公园',
            status: '报名中',
            participants: 45,
            image: 'https://picsum.photos/seed/newseed456/100/100.jpg'
          },
          {
            id: 2,
            title: '社区老人关爱行动',
            time: '2023-10-20 14:00-17:00',
            location: '阳光社区老年中心',
            status: '报名中',
            participants: 28,
            image: 'https://picsum.photos/seed/newseed456/100/100.jpg'
          },
          {
            id: 3,
            title: '图书馆图书整理',
            time: '2023-10-25 10:00-16:00',
            location: '市图书馆',
            status: '报名中',
            participants: 15,
            image: 'https://picsum.photos/seed/newseed456/100/100.jpg'
          },
          {
            id: 4,
            title: '校园义务维修活动',
            time: '2023-11-01 13:00-17:00',
            location: '学生活动中心',
            status: '报名中',
            participants: 32,
            image: 'https://picsum.photos/seed/newseed456/100/100.jpg'
          },
          {
            id: 5,
            title: '城市清洁日',
            time: '2023-09-10 08:00-11:00',
            location: '城市广场',
            status: '已结束',
            participants: 120,
            image: 'https://picsum.photos/seed/newseed456/100/100.jpg'
          },
          {
            id: 6,
            title: '义务植树活动',
            time: '2023-09-05 09:00-15:00',
            location: '郊外生态园',
            status: '已结束',
            participants: 85,
            image: 'https://picsum.photos/seed/newseed456/100/100.jpg'
          }
        ]
      }
    }
  }
  </script>
  
  <style scoped>
  .activities {
    padding: 15px;
    padding-bottom: 70px; /* 为底部导航留出空间 */
  }
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .header h1 {
    font-size: 20px;
    font-weight: bold;
    color: #333;
  }
  
  .filter {
    display: flex;
  }
  
  .filter-item {
    padding: 5px 12px;
    margin-left: 10px;
    border-radius: 15px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
    transition: all 0.3s;
  }
  
  .filter-item:hover {
    background-color: #f5f5f5;
  }
  
  .filter-item.active {
    background-color: #409eff;
    color: white;
  }
  
  .activities-container {
    margin-top: 10px;
  }
  </style>
  